import { createStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import { user } from './moudles/user'
import { theme } from './moudles/theme'

export default createStore({
    // 类似data
    // state () {
    //     return {

    //     }
    // }
    state: {
        count: 0,
        isCollapse: false,
        lang: 'zhCn', // 默认语言中文
        assemblySize: 'default',  // 组件大小
        isFullscreen: 'false', // 是否全屏
    },
    // 修改数据，类似methods
    mutations: {
        add (state) {
            state.count++
        },
        addPayLoad (state, payload) {
            state.count += payload
        },
        changeLang (state, lang) {
            state.lang = lang
        },
        changeCollapse (state, isCollapse) {
            state.isCollapse = isCollapse
        },
        changeAssemblySize (state, assemblySize) {
            state.assemblySize = assemblySize
        }
    },
    // 发起异步请求
    actions: {
        addAsync (context) {
            context.commit('add')
        },
        addAsyncPayload (context, payload) {
            context.commit('addPayLoad', payload)
        }
    },
    // 类似计算属性
    getters: {
        getCount (state) {
            return 'count getters:' + state.count
        },
        getCurLang (state) {
            return state.lang
        },
        getCollapsed (state) {
            return state.isCollapse
        },
        getAssemblySize (state) {
            return state.assemblySize
        }
    },
    // 模块拆分,每个模块拥有自己的state\mutation\action\getters\甚至是嵌套子模块
    modules: {
        user,
        theme
    },
    plugins: [
        // vuex持久化配置，默认是存储在localStorage中
        createPersistedState({
            key: '', //存储数据的键名
            paths: ['count','isCollapse','lang','assemblySize','isFullscreen','user', 'theme']  // 存储在state
        })
    ]
})
